import { Modal } from "antd";
import { useContext, useEffect } from "react";
import Draggable from "react-draggable";
import styles from "./style.module.scss";
import useDraggable from "../../../hooks/useDraggable";
import useModal from "../../../hooks/useModal";
import { MyContext } from "../../../store";
import CustomerServiceFloatButton from "./CustomerServiceFloatButton";
import { setSipVisibleOperation } from "../../../store/sip/action";
import CallOutPopver from "./components/CallOutPopver";

// const { Sider } = Layout;

export default () => {
  const {
    isModalOpen,
    showModal,
    hideModal,
    // inCall,
    setCallType,
    callType,
    setInCall,
    // callInfo,
    setCallInfo,
    // mute,
    setMute,
    // hold,
    setHold
  } = useModal();
  // 拖拽控制
  const { draggleRef, disabled, setDisabled, bounds, onStart } = useDraggable();

  const { sipContext, sipDispatch } = useContext(MyContext);

  useEffect(() => {
    const { sipMessage } = sipContext;
    if (sipMessage) {
      if (["OUTGOING_CALL", "INCOMING_CALL"].includes(sipMessage.event)) {
        hideModal();
        setCallInfo({
          phone: sipMessage.data.otherLegNumber
        });
        setCallType(sipMessage.event);
      }

      // 静音
      if ("MUTE" === sipMessage.event) {
        setMute(true);
      }

      //取消静音
      if ("UNMUTE" === sipMessage.event) {
        setMute(false);
      }

      // 保持
      if ("HOLD" === sipMessage.event) {
        setHold(true);
      }

      if (sipMessage.event === "CALL_END") {
        /*message
          .success(
            `呼叫结束:cause:${sipMessage.data.cause};code:${sipMessage.data.code};originator:${sipMessage.data.originator}`
          )
          .then((r) => r);*/
        console.log(`呼叫结束:cause:${sipMessage.data.cause};code:${sipMessage.data.code};originator:${sipMessage.data.originator}`);
        hideModal();
      }

      if (sipMessage.event === "IN_CALL") {
        setHold(false);
        setInCall(true);
      }
    }
  }, [sipContext.sipMessage]);

  useEffect(() => {
    // console.log(sipContext.visibleOperation, "sipContext.visibleOperation");
    if (sipContext.visibleOperation) {
      showModal();
    }
  }, [sipContext.visibleOperation]);

  return (
    <>
      <CustomerServiceFloatButton onClick={showModal} />
      <Modal
        wrapClassName={styles.zrjCSS}
        title={
          <div
            className={"flex h-32 w-full cursor-move items-center bg-gray-200"}
            onMouseOver={() => {
              if (disabled) {
                setDisabled(false);
              }
            }}
            onMouseOut={() => {
              setDisabled(true);
            }}
          ></div>
        }
        className={styles.modal}
        open={isModalOpen}
        onOk={hideModal}
        onCancel={() => {
          hideModal();
          sipDispatch(setSipVisibleOperation(false));
        }}
        destroyOnClose={true}
        width={450}
        mask={false}
        keyboard={false}
        maskClosable={false}
        style={{ right: "-200px" }}
        footer={false}
        zIndex={99998}
        modalRender={(modal) => (
          <Draggable
            disabled={disabled}
            bounds={bounds}
            nodeRef={draggleRef}
            onStart={(event, uiData) => onStart(event, uiData)}
          >
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        )}
      >
        <div className={"pb-10"}>
          <CallOutPopver isCall={callType === ""} />
        </div>

      </Modal>
    </>
  );
};
